<template>
    <div id="page">
        <!-- 顶部 -->
        <div id="header_top">
            <p>分类</p>
            <p>
                <span class="iconfont">&#xf0112;
                </span>
                <span class="iconfont">&#xe71e;</span>
                <i></i>
            </p>
            
        </div>

        <!-- 搜索 -->
        <form action="">
            <input type="text" name="" id="" placeholder="按内容搜索">
        </form>


        <!-- 内容 -->
        <main>
            <div class="left">
                <ul>
                    <!-- <li><a href="#" class="cur">美妆</a></li> -->
                    <li v-for='(item,index) in list' :key='item.id'><span :class="num==index?'cur':''" @click="changcur(index,item.catename)">{{item.catename}}</span></li>
                </ul>
            </div>
            <div class="right">
                <div>
                    <h2>{{title}}</h2>
                    <ul>
                        <li v-for="(item,index) in twolist" :key='index' @click="twolists(item.id)">
                            <img :src="$pre+item.img" alt="">
                            <p>{{item.catename}}</p>
                        </li>
                    </ul>
                </div>                
            </div>
        </main>

        
    </div>
</template>

<script>
// import '../../../assets/css/shop_list.css'
import {mapActions,mapGetters} from 'vuex'
export default {
    data(){
        return{
            num:0,
            title:'热门精选'
        }
    },
    methods:{
        ...mapActions({
            reqchangelist:'sort/reqchangelist',
            reqchangetwolist:'sort/reqchangetwolist'
        }),
        changcur(index,name){
            this.num=index,
            this.title=name,
            this.reqchangetwolist(index)
        },
        // 点击二级分类
        twolists(id){
            this.$router.push('/search?type=2&id='+id)   
        }
    },
    mounted(){
        this.reqchangelist()
    },
    computed:{
        ...mapGetters({
            list:'sort/list',
            twolist:'sort/twolist'
        })
    }
}
</script>

<style scoped src='../../../assets/css/classification.css'>
/* @import '../../../assets/css/shop_list.css'; */
</style>